import TitleCard from '@/pages/components/TitleCard';
import ChartCard from './ChartCard';
import { VipTypeEnum, vipColorMap, vipLabelMap } from '@/enums/vip.enum';

const ClassifyCard = () => {
  const option = {
    tooltip: { trigger: 'item' },
    legend: { left: 'center', bottom: 'bottom', itemWidth: 70, itemHeight: 20 },
    grid: { left: '5%', right: '5%', top: '5%', bottom: '5%' },
    color: [
      vipColorMap[VipTypeEnum.Premium],
      vipColorMap[VipTypeEnum.BlackGold],
      vipColorMap[VipTypeEnum.Diamond],
      vipColorMap[VipTypeEnum.Platinum],
      vipColorMap[VipTypeEnum.Gold],
      vipColorMap[VipTypeEnum.Silver],
      vipColorMap[VipTypeEnum.Mass],
    ],
    series: [
      {
        name: '会员分类',
        type: 'pie',
        radius: ['40%', '90%'],
        padAngle: 5,
        bottom: '20%',
        itemStyle: { borderRadius: 10 },
        label: { show: false, position: 'center' },
        emphasis: {
          label: { show: true, fontSize: 24, fontWeight: 'bold' },
        },
        labelLine: { show: false },
        data: [
          { value: 1080, name: vipLabelMap[VipTypeEnum.Premium] }, // 至尊会员
          { value: 1920, name: vipLabelMap[VipTypeEnum.BlackGold] }, // 黑金会员
          { value: 3360, name: vipLabelMap[VipTypeEnum.Diamond] }, // 钻石会员
          { value: 5880, name: vipLabelMap[VipTypeEnum.Platinum] }, // 铂金会员
          { value: 7688, name: vipLabelMap[VipTypeEnum.Gold] }, // 黄金会员
          { value: 9688, name: vipLabelMap[VipTypeEnum.Silver] }, // 白银会员
          { value: 13500, name: vipLabelMap[VipTypeEnum.Mass] }, // 大众会员
        ],
        tooltip: {
          valueFormatter: (value: number) => value + '人',
        },
      },
    ],
  };
  return (
    <div>
      <TitleCard title="会员分类" />
      <div className="mt-24">
        <ChartCard option={option} className="!h-450"></ChartCard>
      </div>
    </div>
  );
};
export default ClassifyCard;
